<template>
	<view class="container">
		<view class="list">
			<view class="list-item" @click="onDetails">
				<image class="item-img" src="@/static/logo.png" mode=""></image>
				<view class="right">
					<view class="title">门店新产品获得消费者的高度认可</view>
					<view class="date">2024-05-23</view>
				</view>
			</view>
			<view class="list-item">
				<image class="item-img" src="@/static/logo.png" mode=""></image>
				<view class="right">
					<view class="title">门店新产品获得消费者的高度认可</view>
					<view class="date">2024-05-23</view>
				</view>
			</view>
			<view class="list-item">
				<image class="item-img" src="@/static/logo.png" mode=""></image>
				<view class="right">
					<view class="title">门店新产品获得消费者的高度认可</view>
					<view class="date">2024-05-23</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

			};
		},
		methods:{
			onDetails(){
				app.navigationTo('pages/H5/details')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 22rpx;
		box-sizing: border-box;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		.list {
			// padding: 32rpx 24rpx;
			// box-sizing: border-box;

			.list-item {
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.item-img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 12rpx;
					margin-right: 24rpx;
				}

				.right {
					.title {
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
						line-height: 44rpx;
					}

					.deta {
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 44rpx;
					}
				}
			}
		}
	}
</style>